document.addEventListener("DOMContentLoaded", function () {
  const slides = document.querySelector(".slides");
  const prevBtn = document.querySelector(".prev");
  const nextBtn = document.querySelector(".next");
  const slideCount = slides.children.length;
  let currentIndex = 0;
  let timer;

  function showSlide(index) {
    slides.style.transform = `translateX(${-index * 100}%)`;
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slideCount;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    showSlide(currentIndex);
  }

  function resetTimer() {
    clearInterval(timer);
    timer = setInterval(nextSlide, 10000); // 10 seconds interval
  }

  nextBtn.addEventListener("click", () => {
    nextSlide();
    resetTimer();
  });

  prevBtn.addEventListener("click", () => {
    prevSlide();
    resetTimer();
  });

  timer = setInterval(nextSlide, 3000); // 10 seconds interval
});
